import React ,{useState,useEffect} from 'react';
import myAxios from "../../utils/myAixos"
import {
    Button,
    Input,
    Select,
    Space,
    Table, 
    Typography,

} from 'antd';

import {
    useNavigate,  
} from "react-router-dom"
import "./classyuyue.css"
import { render } from '@testing-library/react';

const { Option } = Select;


const Classyuyue = () => {

    const [yuyuedata,setyuyuedata]=useState()
 const [teacher,setteacher]=useState([])
//   let teacher=[1,2,2,3,3]
//   let teacher2=[... new Set(teacher)] 数组去重
//let teacher=[]


    useEffect (()=>{// 跳转页面渲染数据
    myAxios({
        url: "/yuyueData",
        method:"post",
        data:{
        }

    }).then(res=>{
            if(res.data.status===200){
                setyuyuedata(res.data.data) 
                let data=res.data.data
                //循环去重获取数据里面的教练，然后动态渲染下拉框的opition
                for(let i=0;i<data.length;i++){
                    if(  teacher.indexOf(data[i].teacher)===-1 ){
                        teacher.push(data[i].teacher)
                    }
                    
                }
                setteacher(teacher)
            }else{
               //跳转到404页面 
            }
    })  
},[]) 

 // 下拉框的函数  下拉框搜索
 const selectChange = (value) => {
    console.log(value);
    myAxios({
        url: "/coachsSearchs",
        method:"post",
        data:{
            teacher:value
        }

    }).then(res=>{
        if(res.data.status===200){
            setyuyuedata(res.data.data)
          }else{
             //跳转到404页面 
          }
         
    })
};

//点击查询
let [inputval,setinputval]=useState('')  //要使用useState，不然只计算一次input的值
const Inputval=(e)=>{
   setinputval(e.target.value)
}
const searchPro = () => {
    myAxios({
        url: "/yuyueSearch",
        method:"post",
        data:{
            searchVal:inputval
        }

    }).then(res=>{
            if(res.data.status===200){
                setyuyuedata(res.data.data)
            }else{
               //跳转到404页面 
            }
    })
    
   
}
//点击教练签到跳转
const navigate=useNavigate();
const qiandao = () => {
    navigate('/HomePage/qiandao')
}

   //预约记录
<<<<<<< HEAD
   const edit = (record) => {

     navigate('/HomePage/record',{ state: {record} })//跳转传参

=======
 const edit = (record) => {

     navigate('/HomePage/record',{ state: {record} })//跳转传参


>>>>>>> f1e92716ff09cfbf798518903ba2279c1e2c5683
  };





  //以下是表格
const columns = [
    {
      title: '课程名称',
      dataIndex: 'kc_name',
      key: 'kc_name',
     // render: (text) => <a>{text}</a>,
    },
    {
      title: '教练',
      dataIndex: 'teacher',
      key: 'teacher',
    },
    {
      title: '场馆',
      dataIndex: 'address_big',
      key: 'address_big',
    },
    {
        title: '场地',
        dataIndex: 'address',
        key: 'address',
      },
      {
        title: '课程时间',
        dataIndex: 'time',
        key: 'time',
      },
      {
        title: '预约人数',
        dataIndex: 'number',
        key: 'number',
      },
   
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Typography.Link onClick={() => edit(record)}>预约记录</Typography.Link>
        </Space>
      ),
    },
  ];

    return (
        <div>
            <header>
                <div className={"yuyuesearch"}>
                    <div  className={"search"}>
                    <Input placeholder="请输入课程" onInput={Inputval} className={"inp"}/>
                    <Space >
                       
                  <Select  defaultValue="请选择课程教练" style={{ width: 200, marginRight: 20}} onChange={selectChange}>
                        { teacher.map((val, index) => (
                            <Option key={index} value={val}>{val}</Option>))
                        }
                  </Select>
                        <Button type="primary" className={"button1"}
                            onClick={searchPro}
                            style={{
                                width: 80,
                                marginRight: 20
                            }}>查询</Button>
                    </Space>
                    </div>
                    <div className={"qiandao"}>
                    <Button type="primary" className={"button2"}
                            onClick={qiandao}
                            style={{
                                width: 100,
                                marginRight: 20,

                            }}>教练签到</Button>
                    </div>
                </div>
            </header>
            <section>
            <Table columns={columns} dataSource={yuyuedata} 
             rowKey={record => record.id}
            pagination={{
                 defaultPageSize: 8,//默认展示
             } }
            />
            </section>

 
        </div>

    );
}

export default Classyuyue